<template>
  <div class="application-status">
    <div class="filter-bar">
      <div class="block">
        <span class="demonstration">关键字:</span>
        <input type="text" placeholder="请输入搜索关键字" v-model="searchKeyword" />
      </div>

      <div class="block">
        <span class="demonstration">年份：</span>
        <select v-model="year" @change="handleYearChange" class="custom-select">
          <option value="">请选择年份</option>
          <option v-for="yearOption in yearOptions" :key="yearOption" :value="yearOption">{{ yearOption }}</option>
        </select>
      </div>

      <div class="block" v-if="year">
        <span class="demonstration">月份：</span>
        <select v-model="month" @change="handleMonthChange" class="custom-select">
          <option value="">请选择月份</option>
          <option v-for="monthOption in monthOptions" :key="monthOption" :value="monthOption">{{ monthOption }}</option>
        </select>
      </div>

      <div class="block" v-if="year && month">
        <span class="demonstration">日期：</span>
        <select v-model="date" class="custom-select">
          <option value="">请选择日期</option>
          <option v-for="day in daysInMonth" :key="day" :value="day">{{ day }}</option>
        </select>
      </div>

      <div class="block">
        <button @click="applyFilters(searchKeyword, year, month, date)">搜索</button>
      </div>
    </div>

    <!-- 添加加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-loading-spinner></el-loading-spinner>
      <p>数据加载中...</p>
    </div>

    <!-- 添加错误提示 -->
    <el-alert
      v-if="error"
      :title="error"
      type="error"
      show-icon
      @close="error = null">
    </el-alert>

    <table v-if="!loading && !error">
      <thead>
        <tr>
          <th>序号</th>
          <th>开始学习时间</th>
          <th>标准名称</th>
          <th>项目名称</th>
          <th>视频观看进度</th>
          <th>试卷状态</th>
          <th>提交状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in paginatedData" :key="item.id">
          <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
          <td>{{ item.startTime }}</td>
          <td>{{ item.staName }}</td>
          <td>{{ item.pjName }}</td>
          <td>
            <el-progress 
              :percentage="item.sStatus" 
              :status="getProgressStatus(item.sStatus)"
              :stroke-width="15">
            </el-progress>
          </td>
          <td>
            <el-tag 
              :type="item.paperStatus == 1 ? 'success' : 'warning'"
              size="small">
              {{ item.paperStatus == 1 ? '已下载' : '未下载' }}
            </el-tag>
          </td>
          <td>
            <el-tag 
              :type="item.paperUrl != null ? 'success' : 'warning'"
              size="small">
              {{ item.paperUrl != null ? '已提交' : '未提交' }}
            </el-tag>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="filteredData.length"
        layout="total, sizes, prev, pager, next, jumper"
        background>
      </el-pagination>
    </div>
  </div>
</template>

<script>export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据条数
      searchKeyword: '',
      year: null, // 年份
      month: null, // 月份
      date: null, // 日期
      yearOptions: Array.from({ length: 50 }, (_, i) => 2024 - i), // 假设年份选项从2024年开始
      applications: [
        // { id: 1, standardName: '医用防护口罩', projectName: '呼吸阻力', videoProgress: 20, downloaded: false, submitted: false },
          // Add more data as needed
      ],
      daysInMonth: [],
      loading: false,
      error: null,
      searchTimeout: null,
    };
  },
  created: function () {
      this.fetchData();
    },
  computed: {
    filteredData() {
        return this.applications;
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.filteredData.slice(start, end);
    },
    monthOptions() {
      return this.year
        ? Array.from({ length: 12 }, (_, i) => i + 1)
        : [];
    },
  },
  methods: {
    async fetchData() {
      this.loading = true;
      this.error = null;
      try {
        const response = await this.$http.get("/findStudyByUID");
        this.applications = response.data;
      } catch (err) {
        this.error = '获取数据失败,请稍后重试';
        console.error('Error:', err);
      } finally {
        this.loading = false;
      }
    },
    async applyFilters(keyword, year, month, date) {
      this.loading = true;
      this.error = null;
      try {
        const response = await this.$http.get("/searchStudy", {
          params: { info: keyword, year, month, day: date }
        });
        this.applications = response.data;
      } catch (err) {
        this.error = '搜索失败,请稍后重试';
        console.error('Error:', err);
      } finally {
        this.loading = false;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    handleYearChange() {
      this.month = null; // 清除月份和日期的选择
      this.date = null;
      this.daysInMonth = Array.from({ length: 31 }, (_, i) => i + 1); // 默认31天
    },
    handleMonthChange() {
      this.date = null;
      const year = this.year || new Date().getFullYear();
      const month = this.month || new Date().getMonth() + 1;
      this.daysInMonth = Array.from({ length: new Date(year, month, 0).getDate() }, (_, i) => i + 1);
    },
    handleSearch() {
      if (this.searchTimeout) {
        clearTimeout(this.searchTimeout);
      }
      this.searchTimeout = setTimeout(() => {
        this.applyFilters(this.searchKeyword, this.year, this.month, this.date);
      }, 500);
    },
    getProgressStatus(percentage) {
      if (percentage >= 100) return 'success';
      if (percentage >= 50) return '';
      return 'warning';
    }
  },
  watch: {
    searchKeyword() {
      this.handleSearch();
    }
  },
  directives: {
    'hover-option': {
      // 指令用于绑定鼠标悬停事件
      inserted: (el, binding, vnode) => {
        el.addEventListener('mouseenter', () => {
          binding.value = true;
        });
        el.addEventListener('mouseleave', () => {
          binding.value = false;
        });
      }
    }
  }
};</script>

<style scoped>
  .application-status {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
  }

    .filter-bar input,
    .filter-bar select,
    .filter-bar button {
      padding: 8px 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

      .filter-bar select:hover,
      .filter-bar input:hover {
        border-color: #007bff;
        background-color: #fff;
      }

    .filter-bar button {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

      .filter-bar button:hover {
        background-color: #45a049;
      }

  table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  th, td {
    padding: 12px 16px;
    text-align: center;
    border: 1px solid #EBEEF5;
  }

  th {
    background-color: #F5F7FA;
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
  }

  td {
    color: #606266;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
  }

  tr:hover td {
    background-color: #F5F7FA;
  }

  .block {
    display: flex;
    align-items: center;
  }

  .demonstration {
    margin-right: 10px;
    font-weight: bold;
  }

  .pagination-container {
    padding: 20px;
    text-align: center;
    background: white;
    border-top: 1px solid #EBEEF5;
  }

  .custom-select {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    appearance: none; /* 移除默认样式 */
    background-color: white;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="18" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* 添加下拉箭头 */
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }

    .custom-select option:hover {
      background-color: #007bff; /* 悬停时的背景颜色 */
      color: white;
    }

  .loading-container {
    text-align: center;
    padding: 40px 0;
  }

  .loading-container p {
    color: #909399;
    margin-top: 10px;
  }

  :deep(.el-pagination) {
    font-weight: normal;
    color: #606266;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #4CAF50;
    color: white;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
    color: #4CAF50;
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 110px;
  }

  :deep(.el-pagination__sizes) {
    margin-right: 15px;
  }

  :deep(.el-pagination__total) {
    margin-right: 15px;
  }

  :deep(.el-pagination .el-select .el-input .el-input__inner) {
    padding-right: 25px;
    border-radius: 3px;
  }

  :deep(.el-progress-bar__outer) {
    background-color: #ebeef5;
    border-radius: 100px;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 100px;
  }

  :deep(.el-progress--line) {
    margin: 0;
    width: 90%;
  }

  :deep(.el-progress-bar__innerText) {
    color: #606266;
    font-size: 12px;
  }

  :deep(.el-tag) {
    border-radius: 4px;
    padding: 0 8px;
    height: 24px;
    line-height: 22px;
  }

  :deep(.el-tag--success) {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }

  :deep(.el-tag--warning) {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
  }

  td {
    vertical-align: middle;
  }

  td .el-progress {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  td .el-tag {
    margin: 0 auto;
    min-width: 64px;
  }

  tr:hover td {
    background-color: #f5f7fa;
    transition: background-color 0.3s ease;
  }

  th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 500;
    padding: 12px 0;
    position: relative;
  }

  table {
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
    overflow: hidden;
  }

  td, th {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  td:nth-child(3),
  td:nth-child(4) {
    text-align: left;
    padding-left: 20px;
  }

  td:nth-child(2) {
    font-family: monospace;
    letter-spacing: 0.5px;
  }

  td:first-child {
    font-weight: 500;
    color: #909399;
  }
</style>
